<template>
  <div class="leave">
    <Backheader :title="chu"></Backheader>
    <van-notice-bar color="#fff" background="orange" left-icon="info-o">
      温馨提示:提交审批后,将有上级领导进行审批！
    </van-notice-bar>
    <div class="section">
      <van-cell is-link title="请假类型" :value="valus" @click="show = true" />
      <van-action-sheet
        v-model:show="show"
        :actions="actions"
        @select="onSelect"
        title="类型"
      >
      </van-action-sheet>
      <van-cell
        is-link
        title="开始时间"
        :value="valus1"
        @click="show1 = true"
      />
      <van-action-sheet v-model:show="show1" title="开始时间">
        <van-datetime-picker
          @confirm="confirmFun"
          @cancel="cancelFun"
          v-model="currentDate"
          type="datehour"
          title="选择年月日小时"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-action-sheet>
      <van-cell
        is-link
        title="结束时间"
        :value="valus2"
        @click="show2 = true"
      />
      <van-action-sheet v-model:show="show2" title="结束时间">
        <van-datetime-picker
          @confirm="confirmFun1"
          @cancel="cancelFun1"
          v-model="currentDate"
          type="datehour"
          title="选择年月日小时"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-action-sheet>
      <van-cell :border="false" title="需要时长" :value="valus3" />
      <van-notice-bar
        wrapable
        background="#fff"
        :scrollable="false"
        text="请先选择开始时间和结束时间后需要时长自动计算,请假时长将列为考勤统计"
      />
      <van-cell
        :border="false"
        title="请假事由"
        :required="true"
        :value="valus4"
      />
      <van-field
        v-model="message"
        rows="2"
        autosize
        ref="textarea"
        type="textarea"
        maxlength="160"
        placeholder="请输入请假理由！"
        show-word-limit
      />
      <van-cell :border="false" title="图片上传" />
      <div>
        <van-field name="uploader">
          <template #input>
            <van-uploader v-model="imgArr" :after-read="afterRead" />
          </template>
        </van-field>
      </div>

      <div>
        <p class="p">审批流程</p>
        <div class="div_Send">
          <div class="approver" v-for="(v, i) in shenArr" :key="i">
            <p class="approver_p">{{ v }}</p>
            <span @click="spanFun(v, i)">x</span>
          </div>
          <div class="Send" @click="isShowFun">添加人</div>
        </div>
      </div>
      <div>
        <p class="p">抄送人员</p>
        <div class="div_Send">
          <div class="approver" v-for="(v, i) in songArr" :key="i">
            <p class="approver_p">{{ v }}</p>
            <span @click="spanFun1(v, i)">x</span>
          </div>
          <div class="Send" @click="isShowFun1">添加人</div>
        </div>
      </div>
      <van-overlay :show="isShow" @click="isShow = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <p>{{ title }}</p>
            <van-cell-group v-if="title!=='添加审批人'?true:false">
              <van-field
                v-model="valueInput"
                label="姓名"
                placeholder="请输入名字"
              />
            </van-cell-group>
            <van-checkbox-group v-if="title==='添加审批人'?true:false" v-model="checked" direction="horizontal">
              <van-checkbox name="admin">admin</van-checkbox>
              <van-checkbox name="吴昊">吴昊</van-checkbox>
              <van-checkbox name="zwj">zwj</van-checkbox>
              <van-checkbox name="张钞票">张钞票</van-checkbox>
                <van-checkbox name="田振宇">田振宇</van-checkbox>
            </van-checkbox-group>
            <div class="btns">
              <van-button block @click="isShow = false">取消</van-button>
              <van-button block type="primary" @click="isShowque"
                >确认</van-button
              >
            </div>
          </div>
        </div>
      </van-overlay>
    </div>
    <footer>
      <van-button type="primary" block @click="subFun">提交申请</van-button>
    </footer>
  </div>
</template>
<script>
import { Toast } from "vant";
import { ref , toRefs} from "vue";
import { useStore } from 'vuex'
import moment from "moment";
import { eventAdd, updated } from "../../api/evection";
import Backheader from "../../components/backHeader";
export default {
  data() {
    return {};
  },
  components: {
    Backheader,
  },
  created() {},
  mounted() {
    this.$refs.textarea.focus();
  },
  methods: {
    // 自动聚焦
  },
  setup() {
    const store=useStore()
    const { login } = toRefs(store.state.module);
    let chu = ref("请假调休");
    const valus = ref("请选择请假类型"); //请假类型
    const valus1 = ref("请选择开始时间"); //开始时间
    const valus2 = ref("请选择结束时间"); //结束时间
    const valus3 = ref("选择后自动计算"); //需要时长
    const valus4 = ref("请输入请假事由"); //请假事由
    const message = ref(""); //请假事由
    const time = ref("");
    const show = ref(false); //请假
    const show1 = ref(false); //开始
    const show2 = ref(false); //结束
    const show3 = ref(false); //需要
    let isShow = ref(false); //添加审批人的遮罩层
    const valueInput = ref("");
    const currentDate = ref(new Date());
    const actions = [{ name: "事假" }, { name: "病假" }, { name: "产假" }];
    const valuet = ref([]); //图片
    const title = ref(""); //添加标题
    const shenArr = ref([]); //审核人
    const songArr = ref([]); //送抄人
    const imgArr=ref([])
    const checked=ref([])
    const onSelect = (item) => {
      show.value = false;
      valus.value = item.name;
      Toast(item.name);
    };
    // 开始时间点击确认
    const confirmFun = (val) => {
      time.value = val;
      valus1.value = moment(val).format("YYYY-MM-DD hh:mm:ss");
      show1.value = false;
      if (valus2.value !== "请选择结束时间") {
        if (valus1.value >= valus2.value) {
          Toast.fail("时间冲突,请重新选择", { duration: 1000 });
          valus1.value = "请选择开始时间";
          valus3.value = "";
        } else {
          valus3.value = timeNum(valus1.value, valus2.value);
        }
      }
    };
    // 结束时间点击确认
    const confirmFun1 = (val) => {
      valus2.value = moment(val).format("YYYY-MM-DD hh:mm:ss");
      show2.value = false;
      console.log(valus1.value);
      if (valus1.value === "请选择开始时间") {
        Toast.fail("请选择开始时间", { duration: 1000 });
        valus2.value = "请选择结束时间";
      }
      if (val.getTime() <= time.value.getTime()) {
        Toast.fail("时间冲突,请重新选择", { duration: 1000 });
        valus2.value = "请选择结束时间";
        valus3.value = "";
      } else {
        valus3.value = timeNum(valus1.value, valus2.value);
      }
    };
    // 开始时间点击取消
    const cancelFun = () => {
      show1.value = false;
    };
    // 结束时间点击取消
    const cancelFun1 = () => {
      show2.value = false;
    };
    // 点击返回
    const onClickLeft = () => Toast("返回");
    // 添加审批人
    const isShowFun = () => {
      title.value = "添加审批人";
      isShow.value = true;
      valueInput.value = "";
    };
    // 自动计算时间
    const timeNum = (a, b) => {
      let timeStarts = new Date(a).getTime(); //开始时间
      let timeEnds = new Date(b).getTime(); //结束时间
      let timer = timeEnds - timeStarts;
      let mouth = parseInt(timer / 1000 / 60 / 60 / 24 / 30);
      let day = parseInt(timer / 1000 / 60 / 60 / 24);
      let hours = parseInt((timer / 1000 / 60 / 60) % 24);
      let minutes = parseInt((timer / 1000 / 60) % 60);
      let seconds = parseInt((timer / 1000) % 60);

      let str =
        supplement(day) +
        "天" +
        supplement(hours) +
        ":" +
        supplement(minutes) +
        ":" +
        supplement(seconds);
      return str;
    };
    const supplement = (timer) => {
      if (timer < 10) {
        return (timer = "0" + timer);
      } else {
        return timer;
      }
    };
    // 点击添加审批人确认按钮
    const isShowque = () => {
        checked.value.slice(0,checked.length)
        if(checked.length!==0){
            if (title.value == "添加审批人") {
                isShow.value = false;
                checked.value.forEach((v,i)=>{
                    if (shenArr.value.length == 0) {
                        shenArr.value.push(v)
                    }else{
                        shenArr.value.forEach((j,k)=>{
                            if (!shenArr.value.includes(v)) {
                                shenArr.value.push(v)
                            }
                        })
                    }
                })
            } 
        }
      if (valueInput.value !== "") {
        if (title.value == "添加审批人") {
          isShow.value = false;
          shenArr.value.push(valueInput.value);
        } else {
          isShow.value = false;
          songArr.value.push(valueInput.value);
        }
      }
    };
    // 点击添加审批人x关闭
    const spanFun = (val, index) => {
        checked.value.splice(index,1);
        shenArr.value.splice(index, 1);
    };
    const spanFun1 = (val, index) => {
        songArr.value.splice(index, 1);
    };

    // 添加送抄人
    const isShowFun1 = () => {
      title.value = "添加送抄人";
      isShow.value = true;
      valueInput.value = "";
    };
    // 点击上传
    const afterRead= (file) => {
      var formdata = new FormData();
      formdata.append("file", file.file);
      formdata.append("pid", 0);
      updated(formdata).then((res) => {
        if (res.status == 200) {
          Toast.success("上传成功");
        } else {
          Toast.fail("上传失败");
        }
      });
    };
    // 提交按钮
    const subFun = () => {
      let username = login._object.login;
      let sends = songArr.value.join(",");
      let approvals = shenArr.value.join(",");
      eventAdd({
        proposer:username,
        eventType: valus.value,
        leaveTime: valus1.value,
        endTime: valus2.value,
        needTime: valus3.value,
        evection: message.value,
        approval:approvals,
        seed:sends,
        imgsArr:imgArr,
      }).then((res)=>{
          if(res.status==200){
              Toast.success('申请成功');
              valus.value='请选择请假类型'
              valus1.value='请选择开始时间'
              valus2.value='请选择结束时间'
              valus3.value='选择后自动计算'
              message.value='请输入请假事由'
              imgArr.value = [];
              shenArr.value = []; //添加审核人数组
              songArr.value = []; //添加送抄人数组
          }else{
              Toast.fail('申请失败');
              valus.value='请选择请假类型'
              valus1.value='请选择开始时间'
              valus2.value='请选择结束时间'
              valus3.value='选择后自动计算'
              message.value='请输入请假事由'
              imgArr.value = [];
              shenArr.value = []; //添加审核人数组
              songArr.value = []; //添加送抄人数组
          }
      })
    };
    return {
      onClickLeft,
      subFun,
      afterRead,
      chu,
      checked,
      show,
      show1,
      show2,
      show3,
      message,
      actions,
      onSelect,
      valus,
      valus1,
      valus2,
      valus3,
      valus4,
      valuet,
      isShow,
      imgArr,
      title,
      shenArr,
      songArr,
      isShowFun,
      isShowFun1,
      isShowque,
      spanFun,
      spanFun1,
      valueInput,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate,
      confirmFun,
      cancelFun,
      cancelFun1,
      confirmFun1,
    };
  },
};
</script>
<style lang="scss" scoped>
.leave {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 16px;
}
.section {
  flex: 1;
  overflow: auto;
}
.p {
  margin-left: 20px;
}
.div_Send {
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
}
.Send {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.approver {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0e9cff;
  color: #fff;
  position: relative;
  font-size: 12px;
  margin-right: 20px;
  p {
    line-height: 24px;
    text-align: center;
    overflow: hidden;
  }
  span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.approver_p {
  width: 100%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 30px;
}

.block {
  width: 100%;
  height: 200px;
  background-color: #fff;
  border-radius: 8%;
  p {
    width: 100%;
    margin: 15px 0;
    text-align: center;
  }
  .btns {
    width: 100%;
    display: flex;
    margin: 30px 0 20px 0;
  }
}
.section::-webkit-scrollbar {
  display: none;
}
footer {
  width: 100%;
}
.content {
  padding: 16px 16px 160px;
}
</style>